<template>
	<div class="box-card">
		<el-card>
			<el-form class="search-form" :model="searchForm" ref="searchForm" label-width="100px">
				<el-row>
					<el-col :span="20">
						<el-row :gutter="20">
							<el-col :lg="12" :xl="8" v-for="(fl,index) in formItems" :key="'fl' + index">
								<template v-if="showMore || index < 3">
									<el-form-item :label="fl.label" :prop="fl.type.includes('Multi')?'':fl.prop">

										<!-- 
											Input
											普通输入框
										 -->
										<template v-if="fl.type == 'input'">
											<el-input style="width: 100%;" v-model="searchForm[fl.prop]"
												:placeholder="`请输入${fl.label}`"
												@keyup.enter.native="handleSearch('searchForm')">
											</el-input>
										</template>

										<!-- 
											NumberInput
											数字输入框
										-->
										<template v-if="fl.type == 'numberInput'">
											<el-input style="width: 100%;" v-model.number="searchForm[fl.prop]"
												type="number" :placeholder="`请输入${fl.label}`" min="0">
											</el-input>
										</template>

										<!-- 
											Select
											普通选择框
										-->
										<template v-if="fl.type == 'select'">
											<el-select style="width: 100%;" v-model="searchForm[fl.prop]"
												:placeholder="`请选择${fl.label}`">
												<el-option v-for="item in fl.options" :key="item.id" :label="item.name"
													:value="item.id">
												</el-option>
											</el-select>
										</template>

										<!-- 
											DatePicker
											普通日期筛选框
										-->
										<template v-if="fl.type == 'datePicker'">
											<el-date-picker v-model="searchForm[fl.prop]" type="date"
												:placeholder="`选择${fl.label}`" value-format="yyyy-MM-dd"
												style="width: 100%;">
											</el-date-picker>
										</template>

										<!-- 
											DateRangeArr
											日期范围筛选框 —— 数组形式存储
										 -->
										<template v-if="fl.type == 'dateRangeArr'">
											<el-date-picker v-model="searchForm[fl.prop]" type="daterange"
												range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
												style="width: 100%;">
											</el-date-picker>
										</template>

										<!-- 
											DateRangeMulti
											日期范围筛选框 —— 两个字段进行存储
										-->
										<template v-if="fl.type == 'dateRangeMulti'">
											<el-row type="flexs">
												<el-col :span="11">
													<el-form-item :prop="fl.prop[0]">
														<el-date-picker v-model="searchForm[fl.prop[0]]" type="date"
															placeholder="请选择开始日期" value-format="yyyy-MM-dd"
															style="width: 100%;">
														</el-date-picker>
													</el-form-item>
												</el-col>
												<el-col :span="2" style="text-align: center;">至</el-col>
												<el-col :span="11">
													<el-form-item :prop="fl.prop[1]">
														<el-date-picker v-model="searchForm[fl.prop[1]]" type="date"
															placeholder="请选择结束日期" value-format="yyyy-MM-dd"
															style="width: 100%;">
														</el-date-picker>
													</el-form-item>
												</el-col>
											</el-row>
										</template>
									</el-form-item>
								</template>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4" style="text-align: right;">
						<el-link style="margin-right: 15px;" :underline="false" type="primary"
							@click="showMore = !showMore">
							展开更多<i :class="showMore?'el-icon-arrow-up': 'el-icon-arrow-down'
						"></i>
						</el-link>
						<el-button size="small" type="primary" @click="handleSearch('searchForm')">搜索</el-button>
						<el-button size="small" @click="handleReset('searchForm')">重置</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-card>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				showMore: false, //展示更多
				searchForm: {}, //搜索集合
				formItems: [...this.formLable],
			}
		},
		props: {
			/**
			 * 组件传参设置
			 * type: 筛选框类型
			 * label：筛选框展示label文案
			 * prop：筛选框form检索值/v-model 绑定值
			 * default：默认值
			 * options：下拉筛选框的选项集合				
			 **/
			formLable: Array,
			//获取数据的方法名
			getDatafunc: {
				type: String,
				default: 'getTableList'
			}
		},
		watch: {
			formItems(val) {
				val.forEach(item => {
					this.searchForm[item.prop] = item.default;
				})
			},
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.formLable.forEach(item => {
					let dataType = Object.prototype.toString.call(item.prop).slice(8, -1);
					let typeState = item.type.includes('Arr');
					if (dataType == 'Array') {
						item.prop.forEach(p => {
							this.searchForm[p] = item.default == undefined ? '' : item.default
						})
					} else {
						if (typeState) {
							this.searchForm[item.prop] = item.default == undefined ? [] : item.default;
						} else {
							this.searchForm[item.prop] = item.default == undefined ? '' : item.default;
						}

					}
				})
			},
			//搜索
			handleSearch(formName) {
				this.$emit('onSearch', this.searchForm)
				this.$parent[this.getDatafunc]()

			},
			//重置
			handleReset(formName) {
				this.$nextTick(() => {
					this.$refs[formName].resetFields();
					this.$parent[this.getDatafunc]()
				})
			},
		}
	}
</script>

<style scoped>
	.search-form {}

	.box-card {
		margin-bottom: 20px;
	}

	.box-card>>>.el-card__body {
		padding: 20px 20px 0px 20px;
	}
</style>
